<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dingbu{
				margin-bottom: 1500px;
			}
			.dibu{
				position: relative;
				bottom: 0;
			}
			.btn{
				position: fixed;
				right: 0;
				bottom: 50%;
				width: 80px;
				height: 30px;
				background: skyblue;
				text-align: center;
				cursor: pointer;
			}
			.img{
				width: 200px;
				height: 200px;
				transition: all 1s;
				overflow: hidden;
			}
			p{
				display: inline;
				margin: 0;
				border: 1px solid #000;
				cursor: pointer;
			}
			.cp{
				height: 0px;
				overflow: hidden;
			}
			.clear_fix{
				clear: both;
			}
			ul li{
				list-style: none;
			}
			.lie{
				float: left;
			}
		</style>
	</head>
	<body>
		<!--图片-->
		<img class="img" src="img/2.jpg"/>
		<div class="p">
			<p class="p1">收起</p>
			<p class="p2">展开</p>
			<p class="p3">切换</p>
		</div>
		
		<!--选项卡-->
		<ul>
			<li>
				<span class="lie">第一</span>
				<!--<li>第二</li>-->
			</li>
			<li>
				<span class="lie">第二</span>
				<!--<li>第二</li>-->
			</li>
			<li>
				<span class="lie">第三</span>
				<!--<li>第二</li>-->
			</li>
			<li>
				<span class="lie">第四</span>
				<!--<li>第二</li>-->
			</li>
		</ul>
		
		
		<!--回到顶部-->
		<div class="dingbu clear_fix">顶部</div>
		<div class="btn">返回顶部</div>
		<div class="dibu">底部</div>
		<script type="text/javascript">
			
			
			/*
			 * 1、图片收起，展开效果
			 * 2、回到顶部效果
			 * 3、选项卡效果，
			 * 可参考淘宝效果
			 */ 
			 
			//回到顶部
			var btn = document.querySelector(".btn");
			btn.addEventListener("click",function(){
				var btn1  = setInterval(function(){
					var btn2 = window.pageYOffset;
					btn2 -= 100;
					window.scrollTo(0,btn2);
					if(btn2<0){
						clearInterval(btn1);
					}
				},20)
			})
			
			//图片
			var imgClass = document.querySelector(".img");
			var p1Class = document.querySelector(".p1");
			var p2Class = document.querySelector(".p2");
			var p3Class = document.querySelector(".p3");
			p1Class.addEventListener("click",function(){
				imgClass.classList.add("cp");
			})
			p2Class.addEventListener("click",function(){
				imgClass.classList.remove("cp");
			})
			p3Class.addEventListener("click",function(){
				imgClass.classList.toggle("cp");
			})
			
			
			//选项卡
			
			
			
			
		</script>
	</body>
</html>
